<template>
  <el-dialog
    title="权限配置"
    :visible.sync="dialogVisible"
    width="600px"
    :close-on-click-modal="false"
  >
    <el-form label-width="80px">
      <el-form-item label="菜单" class="dataJurisdiction_tree">
        <el-tree
          :data="webMenu"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          :expand-on-click-node="false"
          highlight-current
          :default-expand-all="false"
          :check-strictly="isStrictly"
          ref="tree"
          accordion
          :default-checked-keys="checkedIds"
          :default-expanded-keys="loadIds"
        >
          <span class="custom-tree-node" slot-scope="{ data }">
            <span>{{ data.name }}</span>
          </span>
        </el-tree>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" v-preventReClick @click="handleSubmit()"
        >提 交</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import { cloneDeep, concat } from 'lodash'
export default {
  data() {
    return {
      dialogVisible: false,
      webMenu: [],
      defaultProps: {
        children: 'childList',
        label: 'name',
      },
      checkedIds: [], //默认选中的菜单ID
      loadIds: [], //默认展开的菜单ID
      isStrictly: false, //父子不互相关联 默认为 false
      roleId: '',
    }
  },
  mounted() {
    this.$bus.$on('showDialogMenuPermission', this.init)
  },
  beforeDestroy() {
    this.$bus.$off('showDialogMenuPermission')
  },
  methods: {
    async init(row) {
      this.roleId = row.id
      let myMenu = JSON.parse(this.getSession('webMenu'))
      let menuIds = this.flatObj(myMenu).map((v) => v.id)
      this.isStrictly = true
      let res = await this.$store.dispatch(
        'queryTbSysMenuTreeByRoleId',
        this.roleId,
      )
      this.webMenu = this.setDisable(res.data, menuIds)
      let menu = cloneDeep(res.data)
      this.checkedIds = this.flatObj(menu)
        .filter((v) => v.checked || v.isPublic == 1)
        .map((v) => v.id)
      this.dialogVisible = true
      setTimeout(() => {
        this.isStrictly = false
      }, 1000)
    },
    //设置disable属性
    setDisable(data, ownIds) {
      data = data.filter((v) => v.isDev != 1)
      if (data && data.length) {
        data.forEach((item) => {
          let disabled = item.isPublic == 1 || !ownIds.includes(item.id)
          this.$set(item, 'disabled', disabled)
          this.setDisable(item.childList, ownIds)
        })
      }
      return data
    },
    //提交
    async handleSubmit() {
      let checkedArr = this.$refs.tree.getCheckedKeys()
      let halfCheckedArr = this.$refs.tree
        .getHalfCheckedNodes()
        .map((v) => v.id)
      let newArr = concat(checkedArr, halfCheckedArr).map((menuId) => {
        return { roleId: this.roleId, menuId }
      })
      await this.$store.dispatch('menuAddBatchTbSysRole', newArr)
      this.successMsg('操作成功')
      this.dialogVisible = false
    },
  },
}
</script>
<style scoped lang="scss">
.dataJurisdiction_tree .el-tree {
  height: 450px;
  overflow-y: auto;
  border: 1px solid #dcdfe6;
}
</style>